<template>
	<view class="wrap">
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input v-model="name" type="text" placeholder-class="line" placeholder="请填写收货人姓名" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input v-model="telephone" type="text" placeholder-class="line" placeholder="请填写收货人手机号" />
			</view>
			<view class="item" @tap="showRegionPicker">
				<view class="left">所在地区</view>
				<input disabled type="text" v-model="zone" placeholder-class="line" placeholder="省市区县、乡镇等"/>
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea type="text" v-model="location" placeholder-class="line" placeholder="街道、楼牌等"/>
			</view>
			<!--<view class="site-clipboard">
				<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
				<view class="clipboard">
					地址粘贴板
					<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
				</view>
			</view>-->
		</view>
		<view class="bottom">
			<view class="tag">
				<view class="left">标签</view>
				<view v-for="(tag,index) in tagList" :key="index" class="right" @click="ontag(index)">
					
					<u-tag :text="tag.name" :type="primary" :shape="circle" :closeable="false" :mode="tag.color==true?'dark':'light'"
					@click="ontag(index)" :show="true" :size="size"/>
				</view>
			</view>
			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">提醒：每次下单会默认推荐该地址</view>
				</view>
				<view class="right">
					<u-switch v-model="checked" :loading="false" 
					:size="50" @change="change" 
					:active-color="red"
					:disabled="false"
					:activeValue="100"
					:inactiveValue="1"
				></u-switch></view>
			</view>
		</view>
		<view class="addSite" @tap="toAddSite">
			<view class="add">
				<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>新建收货地址
			</view>
		</view>
		<u-picker mode="region" ref="uPicker" v-model="show"  @confirm="confirm"/>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id:'',
			show: false,
			tagList:[{"name":'公司',"color":false},
			{"name":'家',"color":false},
			{"name":'学校',"color":false},
			{"name":'其它',"color":false}],
			tag:'',
			zone:'',
			name:'',
			telephone:'',
			location:'',
			checked: false
		};
	},
	computed: {
		
	},
	methods: {
		change(index) {
			this.checked = !!index;
		},
		showRegionPicker() {
			this.show = true;
		},
		ontag(index){
			for(let i=0;i<this.tagList.length;i++){
				this.tagList[i].color = false
			}
			this.tagList[index].color = true
			this.tag=this.tagList[index].name
		},
		confirm(e) {
			this.zone=''
			this.zone = e.province.label + '-' + e.city.label + '-' + e.area.label;
			this.show=false
		},
		toAddSite(){
			this.$H.post('/order/site/save-site',{
				user_id:this.$store.state.userInfo.id,
				name:this.name,
				telephone:this.telephone,
				zone:this.zone,
				location:this.location,
				tag:this.tag
			}).then(res=>{
				let [err,result] = res;
				if(result.data.code == '401'){
					uni.showModal({
						title:'错误提示',
						content:result.data.message,
						showCancel:false
					})
					return;
				}
				if(result.data.code == '200'){
					if(this.checked){
						this.id=result.data.data.id
					}
					//this.$store.commit('alterUserInfo',result.data.data);
					uni.showModal({
						title:'成功',
						content:'操作成功',
						showCancel:false,
					})
				}
			})
			if(this.checked){
				this.$H.put('/user/user/reset-location',{
					id:this.$store.state.userInfo.id,
					location:this.id
				}).then(res=>{
					let [err,result] = res;
					if(result.data.code == '401'){
						uni.showModal({
							title:'错误提示',
							content:result.data.message,
							showCancel:false
						})
						return;
					}
					if(result.data.code == '200'){
						this.$store.commit('alterUserInfo',result.data.data);
						uni.showModal({
							title:'成功',
							content:'操作成功',
							showCancel:false,
						})
					}
				})
			}
			
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .line {
	color: $u-light-color;
	font-size: 28rpx;
}
.wrap {
	background-color: #f2f2f2;
	.top {
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
			}
		}
		
		.address {
			padding: 20rpx 0;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 28rpx;
		.tag {
			display: flex;
			.left {
				width: 160rpx;
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}
				.plus {
					//padding: 10rpx 0;
				}
			}
		}
		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;
			.tips {
				font-size: 24rpx;
			}
			.right {
			}
		}
	}
}
.addSite {
	display: flex;
	justify-content: space-around;
	width: 600rpx;
	line-height: 100rpx;
	position: absolute;
	bottom: 30rpx;
	left: 80rpx;
	background-color: red;
	border-radius: 60rpx;
	font-size: 30rpx;
	.add{
		display: flex;
		align-items: center;
		color: #ffffff;
		.icon{
			margin-right: 10rpx;
		}
	}
}
</style>
